<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="http://mockjs.com/dist/mock.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
    <style>
      #btn {
        margin-top: 20px;
      }
    </style>
    <script>
      //输入与之匹配的请求 URL地址进行拦截
      //提供相应的模板进行数据的返回
      // Mock.mock("http://www.baidu.com/", "get", {
      //   name: "test",
      //   "age|20-200": 25,
      // });

      // $.ajax({
      //     get: 'get',
      //     url: 'http://www.baidu.com/',
      //     dataType: 'json',
      //     success: function (data) {
      //         console.log(data)
      //     }
      // })
    </script>
  </head>

  <body>
    <div id="view" style="width: 1100px; height: 700px;"></div>
    <button id="btn">刷新</button>

    <script src="./echarts/echarts.js"></script>

    <script>
      Mock.mock("/api/echarts/list", "get", function () {
        return Mock.mock({
          "user|5-10": [
            {
              "id|+888": 1776,
              name: "@province()", // 省份
            },
          ],
        });
      });
    </script>

    <script>
      var myChart = echarts.init(document.getElementById("view"));
      var setT;

      $("#btn").click(() => {
        if (setT) {
          console.log("清除定时器---");
          clearInterval(setT);
        }
        setT = setInterval(function () {
          getEcharts(); // 发送请求
          console.log("定时器开启");
        }, 2000);
      });

      // 发送请求
      function getEcharts() {
        $.ajax({
          get: "get",
          url: "/api/echarts/list",
          dataType: "json",
          success: function (data) {
            console.log(data.user);
            var xData = [];
            var yData = [];
            var d = {};
            data.user.map(function (v) {
              xData.push(v.name);
              yData.push(v.id);
            });
            d = { xData: xData, yData: yData };
            setOpt(d); // 给echarts 传值
          },
        });
      }
      // 渲染 echarts
      function setOpt(data) {
        myChart.setOption({
          title: {
            text: "各省用户数量",
            left: "center",
            y: 10,
            textStyle: {
              color: "#fff",
            },
          },
          backgroundColor: "#101a3c",
          grid: {
            left: 110,
            top: 10,
            bottom: 10,
          },
          tooltip: {
            trigger: "item",
            textStyle: {
              fontSize: 14,
            },
            formatter: "{b0}:{c0}",
          },
          xAxis: {
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          yAxis: [
            {
              type: "category",
              inverse: false,
              data: data.xData,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                margin: -4,
                textStyle: {
                  color: "#fff",
                  fontSize: 16.25,
                },
              },
            },
          ],
          series: [
            {
              type: "pictorialBar",
              symbol:
                "image://",
              symbolRepeat: true,
              symbolMargin: "5%",
              symbolClip: "true",
              symbolSize: 20,
              symbolPosition: "start",

              label: {
                normal: {
                  show: true,
                  position: "insideRight",
                  offset: [40, 0],
                  color: "#fff",
                  formatter: function (params) {
                    return params.value;
                  },
                },
              },
              symbolBoundingData: 10000,
              data: data.yData,
            },
          ],
        });
      }

      // 发送请求
      getEcharts();
    </script>
  </body>
</html>
